<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="Mosaddek">
		<meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
		<link rel="shortcut icon" href="img/favicon.html">

		<title>Dynamic Table</title>

		<!-- Bootstrap core CSS -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/bootstrap-reset.css" rel="stylesheet">
		<!--external css-->
		<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
		<!-- Custom styles for this template -->
		<link href="css/style.css" rel="stylesheet">
		<link href="css/style-responsive.css" rel="stylesheet" />
		<link href="css/local.css" rel="stylesheet" />
		<meta charset='utf-8'/>
		  <link href='css/fullcalendar.css' rel='stylesheet'/>
		  <link href='css/fullcalendar.print.css' rel='stylesheet' media='print'/>
		  <style>
		    body {
		      margin: 40px 10px;
		      padding: 0;
		      font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
		      font-size: 14px;
		    }
		
		    #calendar {
		      max-width: 900px;
		      margin: 0 auto;
		    }
		
		    #box {
		      display: none;
		    }
		
		    .form-inline {
		      padding: 20px;
		    }
		
		    .select {
		      display: block;
		      width: 100%;
		      padding: 5px 0;
		      margin-bottom: 20px;
		    }
		
		    .label-success {
		      background-color: #82af6f;
		    }
		
		    .label-danger {
		      background-color: #d15b47;
		    }
		  </style>
		  <script src='js/jquery-1.8.3.min.js'></script>
		  <script src='js/moment.min.js'></script>
		  <script src='js/fullcalendar.js'></script>
		  <script src="js/locale/zh-cn.js"></script>
		  <script src="layer/layer.js"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
		<!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->


	</head>

	<body>

		<section id="container" class="">
			<!--header start-->
			<div id="header">

			</div>


			<!--main content start-->

			<section id="main-content">
				<section class="wrapper">
					<!-- page start-->
					<div class="row">
						<div class="col-lg-12">
							<section class="panel">
								<header class="panel-heading">
									排班列表
								</header>
								<!-- 搜索-->
								<div id='calendar'></div>
								
								<div id='box'>
								  <form class='form-inline'>
								    <select name='username' class='select'>
								      <option :value="item.id" v-for="item in NurWork">{{item.userName}}</option>
								    </select>
									<select name='username' class='select'>
										<option v-for="ro in room">{{ro.roomnumber}}房</option>
									</select>
								    <div class='radios'>
								      <label class='label_canlendar'><input class='ace' type='radio' value='#3a87ad' name='code' checked><span
								        class='classes' style='color:#3a87ad'>早班</span></label>
								      <label class='label_canlendar'><input class='ace' type='radio' value='#82af6f' name='code'><span
								        class='classes' style='color:#82af6f'>中班</span></label>
								      <label class='label_canlendar'><input class='ace' type='radio' value='#d15b47' name='code'><span
								        class='classes' style='color:#d15b47'>晚班</span></label>
								    </div>
								  </form>
								</div>

							</section>
						</div>
					</div>
					<!-- page end-->
				</section>
			</section>
			<!--main content end-->
		</section>

		<script src='js/moment.min.js'></script>
		<script src='js/fullcalendar.js'></script>
		<script src="js/locale/zh-cn.js"></script>
		<script src="layer/layer.js"></script>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.js"></script>
		<script src="localjs/paiban.js"></script>

		<script>
			//数据
		  var events = [
		    {
		      id: 1001,
		      text: '张三',
		      title: '张三 - 早班',
		      backgroundColor: '#3a87ad',
		      start: '2018-02-01'
		    },
		    {
		      id: 1002,
		      text: '张三',
		      title: '张三 - 中班',
		      backgroundColor: '#82af6f',
		      start: '2018-02-02',
		      end: '2018-02-03'
		    },
		    {
		      id: 1003,
		      text: '张三',
		      title: '张三 - 晚班',
		      backgroundColor: '#d15b47',
		      start: '2018-02-04'
		    },
		    {
		      id: 1004,
		      text: '张三',
		      title: '张三 - 晚班',
		      backgroundColor: '#d15b47',
		      start: '2018-02-05'
		    },
		    {
		      id: 1005,
		      text: '张三',
		      title: '张三 - 晚班',
		      backgroundColor: '#d15b47',
		      start: '2018-02-06'
		    },
		    {
		      id: 1006,
		      text: '张三',
		      title: '张三 - 早班',
		      backgroundColor: '#3a87ad',
		      start: '2018-02-07',
		      end: '2018-02-07'
		    },
		    {
		      id: 10060,
		      text: '张三',
		      title: '张三 - 中班',
		      backgroundColor: '#82af6f',
		      start: '2018-02-07'
		    },
		    {
		      id: 1007,
		      text: '张三',
		      title: '张三 - 中班',
		      backgroundColor: '#82af6f',
		      start: '2018-02-15'
		    },
		    {
		      id: 1008,
		      text: '张三',
		      title: '张三 - 中班',
		      backgroundColor: '#82af6f',
		      start: '2018-02-16'
		    },
		    {
		      id: 1009,
		      text: '张三',
		      title: '张三 - 早班',
		      backgroundColor: '#3a87ad',
		      start: '2018-02-17'
		    },
		    {
		      id: 1010,
		      text: '张三',
		      title: '张三 - 早班',
		      backgroundColor: '#3a87ad',
		      start: '2018-02-25',
		      end: '2018-02-25'
		    }
		  ];

		  $box = $('#box');
		  $calendar = $('#calendar');
		  $calendar.fullCalendar('destroy');

		  var calendar = $calendar.fullCalendar({
		    header: {
		      left: 'month,agendaWeek,agendaDay',
		      center: '',
		      right: 'prev,next today'
		    },
		    buttonText: {
		      today: '今天'
		    },
		    locale: 'zh-cn',
		    defaultView: "agendaWeek", // basicWeek listWeek agendaWeek
		    weekMode: 'liquid',
		    // weekNumbers: true,
		    // height: 'auto',

		    timeFormat: 'HH:mm',
		    defaultDate: '2018-02-24',
		    navLinks: true,       // can click day/week names to navigate views
		    eventLimit: 3,        // 限制一天中显示的事件数，默认false
		    allDayText: '排班',   // 日历上显示全天的文本
		    selectable: true,     // 允许用户通过单击或拖动选择日历中的对象，包括天和时间。
		    selectHelper: false,  // 当点击或拖动选择时间时，显示默认加载的提示信息，该属性只在周/天视图里可用。
		    unselectAuto: true,   // 当点击页面日历以外的位置时，自动取消当前的选中状态。
		    eventBackgroundColor: '#3a87ad',    // 设置日程事件的背景色
		    events: events,
		    select: select,
		    eventClick: eventClick
		  });

		  // 添加排班
		  //start开始时间，end结束时间，allDay
		  function select(start, end, allDay) {
		    layer.open({
		      type: 1,
		      shade: false,
		      content: $box,
		      title: '选择班次',
		      btn: ['确认', '关闭'],
		      btn1: function () {
		        layer.closeAll();
		      },
		      yes: addCallback
		    });

		    // 添加排班 - 弹窗回调
		    function addCallback() {
		      var bgColor = $box.find("input[name=code]:checked").val();//背景颜色
		      var title = $box.find("input[name=code]:checked").next().text();//班次
		      var text = $box.find("option:selected").text();//名字：房间号

		      var json = {
		        title: text + ' - ' + title,
		        text: text,
		        allDay: allDay,
		        backgroundColor: bgColor,
		        start: start.format('YYYY-MM-DD'),
		        end: end.format('YYYY-MM-DD')
		      };

		      // test
		      $('#calendar').fullCalendar('renderEvent', json, true);// 添加日历

		      // 添加排班 post
		      function addEvent(data) {
		        if (data.title == null || data.title == '') {
		          return false;
		        }
		        if (checkStr(data.title) == false) {
		          alert("请不要输入非法字符！");
		          return;
		        }

		        $.post("Canlendar/postEvent", data, function (data) {
		          calendar.fullCalendar('renderEvent', json, true); // 添加日历
		        }, "json");
		      }

		      layer.closeAll();
		    }

		    calendar.fullCalendar('unselect');
		  }


		  // 更新排班
		  function eventClick(calEvent, jsEvent, view) {
		    var code = calEvent.backgroundColor;
		    var form = [];
		    form.push("<form class='form-inline'>");
		    form.push(" <select name='username' class='select'>");
		    form.push("  <option value='1' " + (calEvent.text == '张三' ? 'selected' : calEvent.text) + ">张三</option>");
		    form.push("  <option value='2' " + (calEvent.text == '李四' ? 'selected' : calEvent.text) + ">李四</option>");
		    form.push("  <option value='3' " + (calEvent.text == '王五' ? 'selected' : calEvent.text) + ">王五</option>");
		    form.push(" </select>");
			form.push(" <select name='username' class='select'>");
			form.push("  <option value='1' " + (calEvent.text == '2020' ? 'selected' : calEvent.text) + ">2020</option>");
			form.push("  <option value='2' " + (calEvent.text == '2021' ? 'selected' : calEvent.text) + ">2021</option>");
			form.push("  <option value='3' " + (calEvent.text == '2022' ? 'selected' : calEvent.text) + ">2022</option>");
			form.push(" </select>");
		    form.push(" <div class='radios'>");
		    form.push("  <label class='label_canlendar'><input type='radio' value='#3a87ad' name='code' " + (code == '#3a87ad' ? 'checked' : '') + "><span class='classes'style='color:#3a87ad'>早班</span></label>");
		    form.push("  <label class='label_canlendar'><input type='radio' value='#82af6f' name='code' " + (code == '#82af6f' ? 'checked' : '') + "><span class='classes'style='color:#82af6f'>中班</span></label>");
		    form.push("  <label class='label_canlendar'><input type='radio' value='#d15b47' name='code' " + (code == '#d15b47' ? 'checked' : '') + "><span class='classes'style='color:#d15b47'>晚班</span></label>");
		    form.push(" </div>");
		    form.push("</form>");
		    $box.html(form.join(''));

		    layer.open({
		      type: 1,
		      shade: false,
		      title: '当前班次：' + calEvent.title,
		      content: $box,
		      btn: ['确认', '删除', '关闭'],
		      btn2: function () {
		        delEvent(calEvent._id);// 删除排班

		        layer.closeAll();
		      },
		      btn3: function () {
		        layer.closeAll();
		      },
		      yes: updateCallback
		    });

		    // 更新排班 - 弹窗回调
		    function updateCallback() {
		      var bgColor = $box.find("input[name=code]:checked").val();
		      var title = $box.find("input[name=code]:checked").next().text();
		      var text = $box.find("option:selected").text();

		      calEvent.title = text + ' - ' + title;
		      calEvent.text = text;
		      calEvent.backgroundColor = bgColor;

		      // test
		      calendar.fullCalendar('updateEvent', calEvent); // 更新日历

		      // 更新排班 post
		      function editEvent(calEvent) {
		        if (calEvent.title == null || calEvent.title == '') {
		          return false;
		        }
		        if (checkStr(calEvent.title) == false) {
		          alert("请不要输入非法字符！");
		          return;
		        }

		        $.post("Canlendar/postEvent", {
		          id: calEvent.id,
		          allDay: calEvent.allDay,
		          title: calEvent.title,
		          start: calEvent.start,
		          end: calEvent.end,
		          backgroundColor: calEvent.backgroundColor
		        }, function (data) {
		          calendar.fullCalendar('updateEvent', calEvent); // 更新日历
		        }, "json");
		      }

		      layer.closeAll();
		    }
		  }


		  // 删除排班
		  function delEvent(id) {

		    // test
		    calendar.fullCalendar("removeEvents", id); // 删除日历


		     // $.post("Canlendar/delEvent", {id: id}, function(data) {
		     // calendar.fullCalendar("removeEvents", id); // 删除日历
		     // alert('删除成功');
		     // });
		  }

		  // 是否全天
		  function getAllDay(start, end) {
		    var start_his = start.indexOf("00:00:00");
		    var end_his = end.indexOf("00:00:00");
		    if (start_his == -1 || end_his == -1) {
		      return false;
		    } else {
		      return true;
		    }
		  }

		  // 非法字符
		  function checkStr(str) {
		    var pattern = /[~#^$@%&!*'"]/gi;
		    if (pattern.test(str)) {
		      return false;
		    }
		    return true;
		  }
		</script>

		<!-- js placed at the end of the document so the pages load faster -->

		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery.scrollTo.min.js"></script>
		<script src="js/jquery.nicescroll.js" type="text/javascript"></script>

		<script type="text/javascript" src="assets/data-tables/jquery.dataTables.js"></script>
		<script type="text/javascript" src="assets/data-tables/DT_bootstrap.js"></script>

		<!--common script for all pages-->

		<!--script for this page only-->
		<script src="js/common-scripts.js"></script>
		<script src="js/dynamic-table.js"></script>



	</body>
</html>
